<style scoped>
  .title_icon_1 img {
    width: 30px;
    height: auto;
  }

  .title_txt_1 {
    overflow: hidden;
    margin-top: 2px;
    font-size: 18px;
    font-weight: 100;
    color: #222222;
    text-align: center;
    padding: 0.3rem 0
  }

  .title_txt_1 a {
    color: #222
  }

  .content_txt_1 {
    margin-top: 0px;
    clear: both;
    overflow: hidden;
    background-color: #fff;
    line-height: 18px;
    color: #5f6364;
    border-bottom: 1px solid #e0e0e0;
    margin: 0.5rem 0
  }

  .content_txt_1 h3 {
    display: block;
    overflow: hidden;
    font-weight: 100;
    font-size: 16px;
    line-height: 20px;
    color: #222222;
  }

  .content_txt_1 p {
    display: block;
    overflow: hidden;
    font-size: 14px;
  }

  .content_txt_1 strong {
    display: block;
    overflow: hidden;
    font-size: 22px;
    line-height: 22px;
    color: #dd2727;
    margin-top: 5px;
  }

  .content_txt_2 {
    margin: 10px 0px 0px 0px;
    clear: both;
    overflow: hidden;
    padding: 10px;
    background-color: #fff;
    line-height: 18px;
    color: #5f6364;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
  }

  .content_txt_2 b {
    float: left;
    font-weight: 100;
    font-size: 16px;
    line-height: 18px;
    color: #222222;
    padding-right: 8px;
  }

  .content_txt_2 p {
    display: block;
    font-size: 14px;
    margin-top: 1px;
  }

  .content_cell_1 span {
    color: #dd2727;
    font-size: 0.2rem;
  }

  .footer_style_1 {
    height: 54px;
    overflow: hidden;
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
    text-align: center;
    background: url(../assets/img/point_bg_1.png) repeat;
    line-height: 18px;
    color: #5f6364;
    border-top: 1px solid #e0e0e0;
  }

  .footer_style_1 .btn_style_1 {
    color: #fff;
    font-size: 0.8rem;
  }

  .footer_style_1 .btn_style_2 {
    float: right;
    color: #fff;
    font-size: 0.8rem;
  }

  .footer_style_1 .btn_style_1 a, .footer_style_1 .btn_style_1 a:visited {
    display: block;
    padding: 18px 2px;
    background-color: #f7b137;
    color: #fff;
  }

  .footer_style_1 .btn_style_1 a:hover {
    display: block;
    background-color: #f7b137;
    color: #fff;
  }

  .footer_style_1 .btn_style_2 a, .footer_style_1 .btn_style_2 a:visited {
    display: block;
    padding: 18px 2px;
    background-color: #dd2727;
    color: #fff;
  }

  .footer_style_1 .btn_style_2 a:hover {
    display: block;
    background-color: #dd2727;
    color: #fff;
  }

  .btn_style_3 a, .btn_style_3 a:visited {
    display: block;
    padding: 18px 20px;
    background-color: #dd2727;
    color: #fff;
  }

  .btn_style_3 a:hover {
    display: block;
    background-color: #dd2727;
    color: #fff;
  }

  .footer_style_2 {
    overflow: hidden;
    text-align: center;
  }

  .footer_style_2 img {
    width: 22px;
  }

  .footer_style_2 p {
    font-size: 13px;
    color: #414141;
  }

  .weui-col-80 {
    width: 67%;
    float: right;
  }

  .weui-col-33 {
    margin-top: 2%;
    width: 33%;
    float: left;
  }

  .content_txt_1 {
    margin-top: 0;
    clear: both;
    overflow: hidden;
    padding: 10px;
    background-color: #fff;
    line-height: 18px;
    color: #5f6364;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 0;
  }

  .content_txt_1 h3 {
    display: block;
    overflow: hidden;
    font-weight: 100;
    font-size: 16px;
    line-height: 20px;
    color: #222222;
  }

  .content_txt_1 p {
    display: block;
    overflow: hidden;
    font-size: 14px;
    margin-top: 5px;
  }

  .content_txt_1 strong {
    display: block;
    overflow: hidden;
    font-size: 22px;
    line-height: 22px;
    color: #dd2727;
    margin-top: 5px;
  }

  .list_cell_5 {
    float: left;
    width: 40%
  }

  .list_cell_5 img {
    width: 95%;
  }

  .num_box_1 {
    overflow: hidden;
    margin-top: 10px;
    border: 1px solid #e0e0e0;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .num_icon_1 {
    display: block;
    float: left;
    font-size: 22px;
    margin-left: 15px;
  }

  .num_icon_2 {
    display: block;
    float: right;
    font-size: 22px;
    margin-right: 15px;
  }

  .marginTop_10 {
    overflow: hidden;
    margin-top: 10px;
  }

  .a_style_6, .a_style_6:visited {
    display: inline-block;
    font-size: 17px;
    background-color: #f7b137;
    border: 1px solid #f7b137;
    color: #fff;
    text-align: center;
    padding-top: 7px;
    padding-bottom: 6px;
    text-decoration: none;
    -moz-border-radius: 3px; /* Gecko browsers */
    -webkit-border-radius: 3px; /* Webkit browsers */
    border-radius: 3px;
    width: 100%
  }

  .clearBoth {
    overflow: hidden;
    clear: both;
  }

  .show_popup {
    text-align: center;
    padding: 1rem 0;
  }

  .show_popup a {
    float: right;
    display: inline-block;
    margin-right: 5%
  }

  .kucun {
    float: right;
    font-size: 1rem;
    color: #222
  }

  .tuwen {
    background-color: #fff;
    text-align: center;
    line-height: 50px;
    position: relative;
    color: #d8d8d8;
  }

  .logo {
    width: 100%;
    height: 260px;
  }

  .content1 {
    padding-bottom: 15px;
  }

  .content2 {
    margin-bottom: 15%;
  }

  .doumi {
    color: white;
    vertical-align: middle;
    margin-bottom: 5px;
    width: 20px;
    height: 20px;
  }
</style>
<template>
  <div>
    <x-header style="background-color:#ffffff;" :left-options="{backText:'',showBack: true}">商品详情</x-header>

    <div class="content1">
      <swiper :list="demo01_list" auto height="260px" dots-class="custom-bottom" dots-position="center"></swiper>
      <div class="bd">
        <div class="content_txt_1">
          <h3>{{goods.name}}</h3>
          <strong><img src="../assets/img/doumi.png" class="doumi"/>{{goods.douMi}}
<span style="text-decoration:line-through;font-size: 12px;margin-bottom:4px;">￥{{goods.proposedPrice}}</span>
            <span class="kucun">库存：{{goods.remainCount}}</span></strong>
        </div>

        <div class="content_txt_2" v-show="adresshow">
          <b>送至</b>
          <p>{{adress.city}}&nbsp;>&nbsp;{{adress.area}}&nbsp;>&nbsp;{{adress.address}}</p>
        </div>
      </div>

      <div class="weui-row weui-no-gutter footer_style_1">
        <div class="weui-row weui-no-gutter footer_style_2">
          <div class="weui-col-33">
            <a :href="'http://yirenyiti.gaozhikeji.com/h5/kefu.html'">
              <img src="../assets/img/footer_nav_11.png"/>
              <p>客服</p>
            </a>
          </div>
          <div class="weui-col-80 btn_style_2"><a href="javascript:;" @click="payit">立即兑换</a></div>
        </div>
      </div>
    </div>
    <div class="tuwen">----------------<span style="margin: 0 10px;">图文详情</span>----------------</div>
    <div class="content2" v-html="goods.desc" style="">
    </div>

    <popup v-model="showpay">
      <div class="show_popup">数量选择<a @click="closeit">关闭</a></div>
      <div class="content_txt_1">
        <div class="cell_txt_1">
          <a target="_self" class="list_cell_5"><img :src="goods.logo"></a>
          <div class="list_cell_6">
            <p>{{goods.name}}</p>
            <strong><img src="../assets/img/doumi.png" class="doumi"/>{{currMoney}} <span
              class="kucun">库存：{{goods.remainCount}}</span></strong>
            <div class="weui-row num_box_1">
              <div class="weui-col-33"><span class="num_icon_1"><a @click="delect">&#45;</a></span></div>
              <div class="weui-col-33"><span class="title_txt_1"><h2>{{sum}}</h2></span></div>
              <div class="weui-col-33"><span class="num_icon_2"><a @click="add">&#43;</a></span></div>
            </div>
          </div>
        </div>

        <div class="submit_1 clearBoth marginTop_10"><a @click="paygoods" class="a_style_6 a_btn_1">提交订单</a></div>
      </div>
    </popup>
    <loading v-model="load" text="加载中"></loading>
    <toast v-model="success">{{message}}</toast>
    <toast v-model="error" type="warn">{{errorMessage}}</toast>
  </div>

</template>
<script>
  import {XHeader, Swiper, SwiperItem, Popup, Loading, Toast, Badge} from 'vux'
  import common from '../services/common';
  export default {
    data() {
      return {
        adresshow: false,
        showpay: false,
        sum: 1,
        message: "成功",
        errorMessage: "失败",
        success: false,
        error: false,
        goods: [],
        load: true,
        show: false,
        adress: [],
        currMoney: 0,
        form: {
          goodsId: "",
        },
        demo01_list: [],
      }
    },
    components: {
      XHeader,
      Swiper,
      SwiperItem,
      Popup,
      Loading,
      Toast,
      Badge
    },
    mounted: function () {
      document.title = "商品详情";
      this.form.goodsId = common.getQueryString("id");

      common.post(common.getRequestData("goodsInfo", this.form), (res) => {
        if (res.data.responseCode == '0000') {
          this.goods = res.data.data;
          this.currMoney = this.goods.douMi;
          if (this.goods.pics) {
            for (let i = 0; i < this.goods.pics.length; i++) {
              let item = {
                "img": this.goods.pics[i]
              };
              this.demo01_list.push(item)
            }
          } else {
            let item = {
              "img": this.goods.logo
            };
            this.demo01_list.push(item)
          }
          this.load = false
        } else {
          this.error = true;
          this.errorMessage = res.data.responseMsg;
        }
      }, false);

    },
    methods: {
      payit(){
        this.showpay = true
      },
      closeit(){
        this.showpay = false
      },
      delect(){
        if (this.sum <= 0) {
          this.sum = 0
        } else {
          this.sum--;
          this.currMoney = this.goods.douMi * this.sum;
        }
      },
      add(){
        if (this.sum > this.goods.remainCount) {
          this.sum = this.goods.remainCount
        } else {
          this.sum++;
          this.currMoney = this.goods.douMi * this.sum;
        }
      },
      paygoods(){
        this.showpay = false;
        if (this.sum == 0) {
          this.error = true;
          this.errorMessage = "数量不能为0";
          return;
        }
        /*if (common.checkLogin()) {*/
        common.setStorage("goods", JSON.stringify(this.goods));
        common.setStorage("goodsCount", this.sum);
        this.$router.push('/order')
        /*} else {
         this.message = "正在登陆..."
         this.success = true;
         common.setStorage('auth_success_redirect_to', location.href);
         location.replace('http://yirenyiti.gaozhikeji.com/daiyan/wx/entrance?type=' + encodeURIComponent('auth.html?type=0'));
         this.success = false;
         }*/
      },
    }
  }
</script>
